<template>
  <drag-modal
    title="权限"
    :width="450"
    :visible="visible"
    :destroyOnClose="true"
    :confirmLoading="submitLoading"
    :maskClosable="false"
    @ok="ok"
    @cancel="cancel"
  >
    <a-tabs type="card" default-active-key="0">
      <a-tab-pane key="0">
        <span slot="tab">
          菜单权限
        </span>
        <a-card style="margin-top: 12px;">
          <a-spin :spinning="menuLoading">
            <div class="modal-tool" v-if="menuPermissionTreeData && menuPermissionTreeData.length > 0">
              <a @click="menuCheckAll">全选</a>
              <a-divider type="vertical" />
              <a @click="menuUncheckAll">取消全选</a>
            </div>
            <div style="max-height: 500px; overflow-y: auto;">
              <a-tree
                v-if="!menuLoading"
                :tree-data="menuPermissionTreeData"
                :show-icon="true"
                :show-line="false"
                :checkable="true"
                :selectable="false"
                :checkStrictly="true"
                :checkedKeys="menuCheckedTreeNodeKeys"
                @check="menuOnCheck"
              >
                <template slot="title" slot-scope="item">
                  <span v-if="item.type == 0 || (item.type == 1 && item.children)"><a-icon type="folder-open" /> {{item.customTitle}} </span>
                  <span v-else-if="item.type == 1 && !item.children"><a-icon type="folder" /> {{item.customTitle}} </span>
                  <span v-else-if="item.type == 2"><a-icon type="link" /> {{item.customTitle}} </span>
                  <span v-else><a-icon type="question-circle" /> {{item.customTitle}} </span>
                </template>
              </a-tree>
            </div>
          </a-spin>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="1">
        <span slot="tab">
          数据权限
        </span>
        <a-card style="margin-top: 12px;">
          <a-form-model-item
            label="数据权限"
            prop="dataScope"
          >
            <a-select v-model="form.dataScope" @change="onDataScopeChange" :getPopupContainer="(triggerNode)=>{ return triggerNode.parentNode}" style="width: 100%">
              <a-select-option v-for="item in dict.dataScope" :key="item.key" :value="item.value">{{item.title}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-spin :spinning="dataLoading" v-if="form.dataScope == 1">
            <div class="modal-tool" v-if="dataPermissionTreeData && dataPermissionTreeData.length > 0">
              <a @click="dataCheckAll">全选</a>
              <a-divider type="vertical" />
              <a @click="dataUncheckAll">取消全选</a>
            </div>
            <div style="max-height: 500px; overflow-y: auto;">
              <a-tree
                v-if="!dataLoading"
                :tree-data="dataPermissionTreeData"
                :show-icon="true"
                :show-line="false"
                :checkable="true"
                :selectable="false"
                :checkStrictly="true"
                :checkedKeys="dataCheckedTreeNodeKeys"
                @check="dataOnCheck"
              >
                <template slot="title" slot-scope="item">
                  <span v-if="item.type == 0"><a-icon type="bank" /> {{item.customTitle}} </span>
                  <span v-else-if="item.type == 1"><a-icon type="shop" /> {{item.customTitle}} </span>
                  <span v-else-if="item.type == 2"><a-icon type="apartment" /> {{item.customTitle}} </span>
                  <span v-else><a-icon type="question-circle" /> {{item.customTitle}} </span>
                </template>
              </a-tree>
            </div>
          </a-spin>
        </a-card>
      </a-tab-pane>
    </a-tabs>
  </drag-modal>
</template>

<script>
import {roleService} from '@/services'

export default {
  name: 'PermissionModal',
  props: {
    visible: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      menuLoading: false,
      dataLoading: false,
      submitLoading: false,
      menuPermissionTreeData: [],
      dataPermissionTreeData: [],
      menuCheckedTreeNodeKeys: [],
      dataCheckedTreeNodeKeys: [],
      form: {
        dataScope: undefined,
      },
      dict: {
        id: undefined,
        dataScope: []
      }
    }
  },
  methods: {
    menuCheckAll() {
      this.menuPermissionTreeData.map(treeNode => {
        this.menuTravelCheckTreeNode(treeNode)
      })
      // 数组去重
      this.menuCheckedTreeNodeKeys = Array.from(new Set(this.menuCheckedTreeNodeKeys))
    },
    menuUncheckAll() {
      this.menuCheckedTreeNodeKeys = []
    },
    menuTravelCheckTreeNode(node) {
      this.menuCheckedTreeNodeKeys.push(node.key)
      let treeNodeChildren = node.children
      if (treeNodeChildren) {
        treeNodeChildren.forEach(item => {
          this.menuTravelCheckTreeNode(item)
        })
      }
    },
    menuTravelUnCheckTreeNode(node) {
      let nodeIndex = this.menuCheckedTreeNodeKeys.findIndex(item => item === node.key)
      this.menuCheckedTreeNodeKeys.splice(nodeIndex, 1)
    },
    menuOnCheck(checkedKeys, info) {
      if (info.checked) {
        // 递归选中该节点时也将子节点全部选中
        this.menuTravelCheckTreeNode(info.node.dataRef)
        // 数组去重
        this.menuCheckedTreeNodeKeys = Array.from(new Set(this.menuCheckedTreeNodeKeys))
      }
      else {
        // 取消该节点时不关联子节点的取消
        this.menuTravelUnCheckTreeNode(info.node.dataRef)
      }
    },

    dataCheckAll() {
      this.dataPermissionTreeData.map(treeNode => {
        this.dataTravelCheckTreeNode(treeNode)
      })
      // 数组去重
      this.dataCheckedTreeNodeKeys = Array.from(new Set(this.dataCheckedTreeNodeKeys))
    },
    dataUncheckAll() {
      this.dataCheckedTreeNodeKeys = []
    },
    dataTravelCheckTreeNode(node) {
      this.dataCheckedTreeNodeKeys.push(node.key)
      let treeNodeChildren = node.children
      if (treeNodeChildren) {
        treeNodeChildren.forEach(item => {
          this.dataTravelCheckTreeNode(item)
        })
      }
    },
    dataTravelUnCheckTreeNode(node) {
      let nodeIndex = this.dataCheckedTreeNodeKeys.findIndex(item => item === node.key)
      this.dataCheckedTreeNodeKeys.splice(nodeIndex, 1)
    },
    dataOnCheck(checkedKeys, info) {
      if (info.checked) {
        // 递归选中该节点时也将子节点全部选中
        this.dataTravelCheckTreeNode(info.node.dataRef)
        // 数组去重
        this.dataCheckedTreeNodeKeys = Array.from(new Set(this.dataCheckedTreeNodeKeys))
      }
      else {
        // 取消该节点时不关联子节点的取消
        this.dataTravelUnCheckTreeNode(info.node.dataRef)
      }
    },
    onDataScopeChange(val) {
      if (val != 1) {
        this.dataCheckedTreeNodeKeys = []
      }
    },
    cancel() {
      this.$emit('cancel')
    },
    ok() {
      this.submitLoading = true
      const params = {
        id: this.form.id,
        dataScope: this.form.dataScope,
        menuIds: this.menuCheckedTreeNodeKeys.map(Number),
        dataIds: this.dataCheckedTreeNodeKeys.map(Number)
      }
      roleService.setPermission(JSON.stringify(params)).then(res => {
        const result = res.data
        if (result.code === 200) {
          this.$emit('ok')
          this.$message.success(result.msg)
        }
      }).finally(this.submitLoading = false)
    },
    queryRolePermissionAction(val) {
      this.loading = true
      this.form.id = val
      const params = {
        id: this.form.id
      }
      this.menuCheckedTreeNodeKeys = []
      this.dataCheckedTreeNodeKeys = []
      roleService.queryRolePermission(JSON.stringify(params)).then(res => {
        const result = res.data
        if (result.code === 200 && result.data) {
          this.form.dataScope = result.data.dataScope
          this.menuCheckedTreeNodeKeys = result.data.menuIds
          this.dataCheckedTreeNodeKeys = result.data.dataIds
        }
      }).finally(this.loading = false)
    },
    queryPermissionAction() {
      this.loading = true
      roleService.queryPermissionTree().then(res => {
        const result = res.data
        if (result.code === 200 && result.data) {
          this.menuPermissionTreeData = result.data
        }
      }).finally(this.loading = false)
    },
    queryDataPermissionAction() {
      this.loading = true
      roleService.queryDataPermissionTree().then(res => {
        const result = res.data
        if (result.code === 200 && result.data) {
          this.dataPermissionTreeData = result.data
        }
      }).finally(this.loading = false)
    }
  },
  mounted() {
    this.getDict(JSON.stringify({code: 'SYS_DATA_SCOPE_TYPE'})).then(res => this.dict.dataScope = res.data.data)
  }
}
</script>
<style lang="less" scoped>
  .ant-modal-body {
    padding: 12px 24px !important;
  }
  .modal-tool {
    padding: 0 8px;
    margin-bottom: 12px;
  }
</style>